<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0">
    <title>Bootstrap 实例 - 折叠面板</title>
    <link rel="stylesheet" href="../css/bootstrap.css"/>
    <script src="http://172.17.149.196:8080/jquery/jquery-2.1.3.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
    <h1>从堆叠到水平排列</h1>

    <div class="row">
        <div class="col-xs-1">.col-md-1</div>
        <div class="col-xs-1">.col-md-1</div>
        <div class="col-xs-1">.col-md-1</div>
        <div class="col-xs-1">.col-md-1</div>
        <div class="col-xs-1">.col-md-1</div>
        <div class="col-xs-1">.col-md-1</div>
        <div class="col-xs-1">.col-md-1</div>
        <div class="col-xs-1">.col-md-1</div>
        <div class="col-xs-1">.col-md-1</div>
        <div class="col-xs-1">.col-md-1</div>
        <div class="col-xs-1">.col-md-1</div>
        <div class="col-xs-1">.col-md-1</div>
    </div>
    <div class="row">
        <div class="col-md-8">.col-md-8</div>
        <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-6">.col-md-6</div>
    </div>
    <h1>移动设备和桌面屏幕</h1>

    <div class="row">
        <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    </div>

    <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
    <div class="row">
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    </div>

    <!-- Columns are always 50% wide, on mobile and desktop -->
    <div class="row">
        <div class="col-xs-6">.col-xs-6</div>
        <div class="col-xs-6">.col-xs-6</div>
    </div>

    <h1>手机、平板、桌面</h1>

    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    </div>
    <div class="row">
        <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
        <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
        <!-- Optional: clear the XS cols if their content doesn't match in height -->
        <div class="clearfix visible-xs-block"></div>
        <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
    </div>

    <h1>响应式列重置</h1>

    <div class="row">
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3.Resize your viewport or check it out on your phone for an example.</div>
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

        <!-- Add the extra clearfix for only the required viewport -->
        <div class="clearfix visible-xs-block"></div>

        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-31</div>
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
    </div>

    <h1>列排序</h1>
    <div class="row">
        <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
        <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
    </div>

</div>

</body>
</html>			